<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>watch监听器</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script>
</head>
<body>
<div id="Application" style="text-align:center;">
    <button @click="click">点击</button>
    <p></p>
    <textarea v-model="textarea"></textarea>
    <p style="white-space: pre-line;">多行文本内
        容:{{ textarea }}
    </p>
    <input type="checkbox" v-model="checkList" value="足球">足球
    <input type="checkbox" v-model="checkList" value="篮球">篮球
    <input type="checkbox" v-model="checkList" value="排球">排球
    <p>{{ checkList }}</p>
    <select v-model="select" multiple>
        <option>男</option>
        <option>女</option>
    </select>
    <p>{{ select }}</p>
    <input v-model.trim.lazy="textFile">
    <p>{{ textFile }}</p>

</div>

<script>
    const App = {
        data() {
            return {
                total: false,
                textarea: "",
                checkList: [],
                select: "",
                textFile: ""
            }
        },
        methods: {
            click: _.debounce(function () {
                console.log(Date());
            }, 2000)
        }

    }
    Vue.createApp(App).mount('#Application');
</script>

</body>
</html>
